<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    {{info}}
    <ul>
        <li v-for="name in arr">{{name}}</li>
    </ul>
  <table>
    <caption>人物列表</caption>
    <tr>
      <th>编号</th><th>名字</th><th>年龄</th><th>性别</th>
    </tr>
    <tr v-for="(p,i) in person">
      <th>{{i+1}}</th>
      <th>{{p.name}}</th>
      <th>{{p.age}}</th>
      <th>{{p.gender}}</th>
    </tr>
  </table>
</div>

<script src="js/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "循环遍历",
            arr: ["刘德华", "郭富城", "黎明", "赵四"],
            person: [{name: "张三", age: 18, gender: "男"},
                {name: "李四", age: 18, gender: "女"},
                {name: "王五", age: 18, gender: "男"}]
        }

    })
</script>
</body>
</html>